import React from 'react';
import * as echarts from 'echarts';
import moment from 'moment';
class EchartLine extends React.Component {
  myChart = {}
  componentDidMount() {
    this.myChart = echarts.init(document.getElementById('EchartLine'));
    let _this = this;
    setInterval(function () {
      _this.myChart.resize();
    }, 2000)
  }
  componentDidUpdate() {
    const { data } = this.props;
    var dataArrO = []
    data.forEach(element => {
      dataArrO.push({
        date: moment(element.creationTime).format("MM-DD"),
        item: element,
        eStatus: element.eventStatus
      })
    });
    var dataArr = dataArrO.reverse();
    var dates = []
    dataArr.forEach(element => {
      if (!dates.includes(element.date)) {
        dates.push(element.date)
      }
    });
    var data1 = []
    var data2 = []
    var data3 = []
    dates.forEach(element => {
      var num = dataArr.filter(o => o.date === element).length
      var ovet = dataArr.filter(o => o.date === element && o.eStatus === '已完结')
      var num2 = ovet.length
      num = num <= 0 ? 1 : num
      data1.push(num)
      data2.push(((num2 / num).toFixed(2))*100)
      var dtimes = 0
      ovet.forEach(item => {
        dtimes += (item.item.dealTimes/3600)/24
      });
      data3.push((dtimes / (num2 === 0 ? 1 : num2)).toFixed(0))
    });
    var option = {
      title: {
        text: '案件分析'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['案件数', '完成率','处理时长(天)']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dates
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '案件数',
          type: 'line',
          stack: 'Total',
          smooth: true,
          data: data1
        },
        {
          name: '完成率',
          type: 'line',
          smooth: true,
          data: data2
        },
        {
          name: '处理时长(天)',
          type: 'line',
          smooth: true,
          data: data3
        },
      ]
    };
    // 绘制图表
    this.myChart.setOption(option);
  }
  render() {
    return (
      <div id='EchartLine' style={{ height: this.props.height }}></div>
    )
  };
}
export default EchartLine;